<!DOCTYPE html>
<html>
<head>
	<title>Bus/总线/发布订阅/观察者模式</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="./js/vue.js"></script>
	<style type="text/css">
		
		
	</style>
</head>
<body>
	<div id="app">
		<child  content="dell"></child>  
		<child  content="lee"></child>
		
	</div>
</body>
<script type="text/javascript">


	Vue.prototype.bus = new Vue();   //Vue的原型上挂载了一个名字为bus的属性，这个属性指向一个vue实例，只要之后去调用new Vue或者创建组件，所创建对象都会有bus这个属性

	//Vue是一个类

	Vue.component("child",{
		data:function() {
			return {
				selfCon:this.content
			}
		},
		props: {
			content:String,
		},
		template:"<div @click='handle'>{{selfCon}}</div>",
		methods: {
			handle:function() {
				this.bus.$emit('change', this.selfCon)
			}

		},
		mounted:function() {  //这个组件挂载数据完成时所触发的函数
			var this_ = this;
			//每当change事件触发，则组件检测到事件发生，进而触发回调函数，这里应该注意的是，这里触发的是同时两个组件，因为两个组件都有bus这个公共属性
			this.bus.$on('change',function(e) {  //
				this_.selfCon = e;  
				 //在这个回调函数中作用域发生了变化，所以用this_来储存原来组件的this
			})
		}
	})
	

	var vm = new Vue({
		el:"#app",
		data:{
	
		},

	})



		
</script>
</html>